<template>
  <div :class="classObj" >
    <div v-if="device==='mobile'&&sidebar.opened" @click="handleClickOutside" />
    <sidebar class="sidebar-container" /><!--侧边栏-->
    <div class="main-container">
        <navbar />
      <app-main /><!--主内容区-->
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'

export default {
  name: 'Layout',
  components: {//定义了组件对象中要使用的子组件。
    Navbar,
    Sidebar,
    AppMain
  },
  mixins: [ResizeMixin],
  computed: {
    sidebar() {//包含了侧边栏的打开状态
      return this.$store.state.app.sidebar
    },
    classObj() {//控制布局的样式，例如侧边栏的显示和隐藏
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
      }
    }
  },
}
</script>

<style lang="scss" scoped>

</style>
